<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理 - 添加员工</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/add.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- 先引入jQuery -->
    <script src="../js/jquery-1.8.3.js"></script>

    <!-- 其他脚本作为模块引入 -->
    <script type="module" src="../js/components/navigation.js"></script>
    <script type="module" src="../js/utils.js"></script>
    <script type="module" src="../js/api.js"></script>
</head>
<body>
<div class="loading-overlay" id="loading-overlay">
    <div class="loading-spinner"></div>
</div>

<div class="toast" id="toast"></div>

<div class="app-container">
    <header class="app-header">
        <div class="logo">
            <i class="fas fa-building"></i> 员工管理系统
        </div>
        <div class="user-info">
            <span id="username-display" class="username"></span>
            <button id="logout-btn" class="btn btn-secondary">
                <i class="fas fa-sign-out-alt"></i> 退出登录
            </button>
        </div>
    </header>

    <div class="app-body">
        <aside class="sidebar">
            <nav class="menu">
                <ul>
                    <li><a href="#" class="menu-item active" data-target="welcome">欢迎页</a></li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">员工管理</a>
                        <ul class="submenu">
                            <li><a href="list.html" class="submenu-item">员工列表</a></li>
                            <li><a href="add.html" class="submenu-item">添加员工</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">业务管理</a>
                        <ul class="submenu">
                            <li><a href="../business/list.html" class="submenu-item">业务列表</a></li>
                            <li><a href="../business/create.html" class="submenu-item">创建业务</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">薪酬管理</a>
                        <ul class="submenu">
                            <li><a href="../salary/overview.html" class="submenu-item">薪酬概览</a></li>
                            <li><a href="../salary/manage.html" class="submenu-item">薪酬管理</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">系统设置</a>
                        <ul class="submenu">
                            <li><a href="../system/user.html" class="submenu-item">用户管理</a></li>
                            <li><a href="../system/profile.html" class="submenu-item">个人设置</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>

        <main class="content">
            <div class="page-header">
                <h1><i class="fas fa-user-plus"></i> 添加员工</h1>
                <div class="breadcrumb">
                    <a href="#"><i class="fas fa-home"></i> 首页</a> &gt;
                    <a href="list.html"><i class="fas fa-users"></i> 员工管理</a> &gt;
                    <span><i class="fas fa-user-plus"></i> 添加员工</span>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2>员工信息表单</h2>
                </div>
                <div class="card-body">
                    <form id="employeeForm">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="name" class="form-label">姓名 <span class="required">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                                    </div>
                                    <input type="text" id="name" name="name" class="form-control" placeholder="请输入姓名" required>
                                </div>
                                <div class="form-error" id="name-error"></div>
                            </div>

                            <div class="form-group col-md-6">
                                <label for="age" class="form-label">年龄 <span class="required">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-calendar"></i></span>
                                    </div>
                                    <input type="number" id="age" name="age" class="form-control" placeholder="请输入年龄" required min="18" max="65">
                                </div>
                                <div class="form-error" id="age-error"></div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="position" class="form-label">职位 <span class="required">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-briefcase"></i></span>
                                    </div>
                                    <input type="text" id="position" name="position" class="form-control" placeholder="请输入职位" required>
                                </div>
                                <div class="form-error" id="position-error"></div>
                            </div>

                            <div class="form-group col-md-6">
                                <label for="department" class="form-label">部门 <span class="required">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-sitemap"></i></span>
                                    </div>
                                    <select id="department" name="department" class="form-control" required>
                                        <option value="">请选择部门</option>
                                        <option value="101">技术部</option>
                                        <option value="102">市场部</option>
                                        <option value="103">人事部</option>
                                        <option value="104">销售部</option>
                                        <option value="105">财务部</option>
                                    </select>
                                </div>
                                <div class="form-error" id="department-error"></div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="hireDate" class="form-label">入职日期 <span class="required">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                    </div>
                                    <input type="date" id="hireDate" name="hireDate" class="form-control" required>
                                </div>
                                <div class="form-error" id="hireDate-error"></div>
                            </div>

                            <div class="form-group col-md-6">
                                <label for="salary" class="form-label">薪资 <span class="required">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-money-bill-wave"></i></span>
                                    </div>
                                    <input type="number" id="salary" name="salary" class="form-control" placeholder="请输入薪资" step="0.01" required min="0">
                                </div>
                                <div class="form-error" id="salary-error"></div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="phone" class="form-label">手机号码</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-phone"></i></span>
                                    </div>
                                    <input type="text" id="phone" name="phone" class="form-control" placeholder="请输入手机号码">
                                </div>
                                <div class="form-error" id="phone-error"></div>
                            </div>

                            <div class="form-group col-md-6">
                                <label for="email" class="form-label">电子邮箱</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                    </div>
                                    <input type="email" id="email" name="email" class="form-control" placeholder="请输入电子邮箱">
                                </div>
                                <div class="form-error" id="email-error"></div>
                            </div>
                        </div>

                        <div class="action-buttons">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> 提交
                            </button>
                            <a href="list.html" class="btn btn-secondary">
                                <i class="fas fa-times"></i> 取消
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </main>
    </div>
</div>

<script>
    // 使用动态导入来加载navigation模块
    $(document).ready(function () {
        console.log("进入增加页面");
        // 动态导入navigation模块
        import('../js/components/navigation.js')
            .then(module => {
                if (module.initNavigation) {
                    module.initNavigation('main-menu', '员工管理', '添加员工');
                }
            })
            .catch(error => {
                console.error('Failed to load navigation module:', error);
            });

        // 表单提交事件
        $("#employeeForm").submit(function (event) {
            event.preventDefault(); // 阻止表单默认提交
            console.log("进入点击事件");

            // 获取表单数据
            let eName = $("#name").val();
            let age = $("#age").val();
            let position = $("#position").val();
            let department = $("#department").val();
            let hireDate = $("#hireDate").val();
            let salary = $("#salary").val();
            let phone = $("#phone").val();
            let email = $("#email").val();

            // 简单的表单验证
            if (!eName || !age || !position || !department || !hireDate || !salary) {
                alert("请填写所有必填字段");
                return;
            }

            // 显示加载中
            $("#loading-overlay").show();

            // 发送AJAX请求
            $.get("../employeeControl/insert", {
                "eName": eName,
                "age": age,
                "position": position,
                "department": department,
                "hireDate": hireDate,
                "salary": salary,
                "phone": phone,
                "email": email
            }, function (b) {
                $("#loading-overlay").hide();
                console.log("增加结果", b);

                if (b === true || b === "true") {
                    alert("添加成功");
                    window.location.href = "list.html";
                } else {
                    alert("添加失败");
                }
            }).fail(function(xhr, status, error) {
                $("#loading-overlay").hide();
                console.error("请求失败:", status, error);
                alert("添加失败，请检查网络连接");
            });
        });
    });
</script>
</body>
</html>